<template>
  <el-dialog
  title="题目预览"
  width="70%"
  :visible="dialogVisible"
  @close="closeDialog"
  >
  <!-- 头部区域 -->
  <el-row :gutter="20" style="margin-bottom:10px" >
     <el-col :span="6">
       <span>[题型] : {{ getQuestionType(topicData.questionType)}}</span>
     </el-col>
     <el-col :span="6">
       <span>[编号] : {{topicData.id}}</span>
     </el-col>
     <el-col :span="6">
       <span>[难度] : {{getDifficulty(topicData.difficulty)}}</span>
     </el-col>
     <el-col :span="6">
       <span>[标签] : {{topicData.tags}}</span>
     </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-bottom:10px;font-size:20px">
     <el-col :span="6">
       <span>[学科] : {{topicData.subjectName}}</span>
     </el-col>
     <el-col :span="6">
       <span>[目录] : {{topicData.directoryName}}</span>
     </el-col>
     <el-col :span="6">
       <span>[方向] : {{topicData.direction}}</span>
     </el-col>
  </el-row>
  <el-divider ></el-divider>

<!-- 题干区域 -->
  <div>
    <p>[题干] :</p>
    <p v-html="topicData.question" style="color:blue"></p>
    <div v-if="topicData.questionType!=='3'">
      <div style="padding-bottom:5px">{{getQuestionType(topicData.questionType)}} 选项：（以下选中的选项为正确答案）</div>
      <div v-for="item in topicData.options" :key="item.code" style="padding:8px 0">
        <el-radio v-if="topicData.questionType==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
        <el-checkbox v-else :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
      </div>
    </div>
  </div>
  <el-divider ></el-divider>
  <!-- 参考答案 -->
  <div>
    <div style="padding-bottom:5px">
      <span style="padding-right:5px">[参考答案] :</span>
      <el-button type="danger" @click="lookVideo">视频答案预览</el-button>
    </div>
    <video :src="topicData.videoURL" controls="controls" style="with:300px;height:200px" v-if="isShow">
      <!-- 不加播放2秒会报错 ===要销毁,不然这样直接关闭会还有声音-->
      <meta name='referrer' content="never">
    </video>
  </div>
  <el-divider ></el-divider>
  <p v-html="topicData.answer">[答案解析] : </p>
  <el-divider ></el-divider>
  <p>[题目备注] : {{topicData.remarks}}</p>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closeDialog">关闭</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  name: 'quertionsTable',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 题目预览数据
    topicData: {
      type: Object,
      required: true
    },
    // 处理题型的方法
    getQuestionType: {
      type: Function,
      default: null
    },
    // 难度数据处理
    getDifficulty: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    // 关闭弹框
    closeDialog () {
      this.$emit('update:dialogVisible', false)
      // 将视频容器隐藏
      this.isShow = false
    },
    // 控制视频容器的显示和隐藏
    lookVideo () {
      this.isShow = !this.isShow
    }
  }

}
</script>

<style lang='scss' scoped>
 ::v-deep .el-divider--horizontal {
    height:2px;
    background-color: #ccc;
  }
 ::v-deep .el-dialog__body {
   font-size: 18px;
 }
</style>
